<template>
  <div ref="videsInfoBoxMain">
    <div class="title">
      <span class="line"></span>
      <span><i class="el-icon-arrow-left" v-show="!showVideoDetailsInfo"
          style="margin-right:30px;cursor: pointer;font-size:18px;font-weight:1000;" @click="blackVideo()"></i><i
          style="font-size: 0.1rem" class="iconfont icon-shipin"></i>
        {{$t('wechat.appVideo')}}</span>
    </div>
    <transition name="el-zoom-in-center">
      <div @scroll="handleScroll" ref="videoList" v-show="showVideoDetailsInfo" class="gutter-example">
        <div v-for="(item, index) in videoList" :key="index" @click="playVideo(item)" class="itemBoxVideo">
          <div>
            <!-- <video ref="media" width="100%" height="260" :autoplay="false"
              v-if="/\.([0-9a-zA-Z]+)$/i.exec(item.path)[1] == 'mp4' || /\.([0-9a-zA-Z]+)$/i.exec(item.path)[1] == 'MP4'"
              src="http://vjs.zencdn.net/v/oceans.mp4"></video> -->
            <video ref="media" width="100%" height="260" :autostart="0"
              v-if="/\.([0-9a-zA-Z]+)$/i.exec(item.path)[1] == 'mp4' || /\.([0-9a-zA-Z]+)$/i.exec(item.path)[1] == 'MP4'"
              :src="item.path"></video>
            <div v-else class="itemBoxVideo" style="width:100%;text-align: center;padding-top: 80px;"><i
                class="el-icon-warning-outline" style="color:#2196f3;"></i> {{$t('wechat.zhuanma')}}</div>
          </div>

          <svg class="playLogo" width="60" height="60" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
              fill="#c6c6ca" stroke="#c6c6ca" stroke-width="4" stroke-linejoin="round" />
            <path d="M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z" fill="#FFF" stroke="#FFF" stroke-width="4"
              stroke-linejoin="round" />
          </svg>
        </div>
        <div class="loadingBox" v-if="showLoading" style="color:#2196f3;"><i :class="loadClass" style="color:#2196f3"></i>
          {{ loadingText }}</div>
      </div>
    </transition>

    <!-- 详情区 -->
    <div v-if="!showVideoDetailsInfo" class="detailsBox">
      <div>
        <!-- http://vjs.zencdn.net/v/oceans.mp4 -->
        <!-- <video v-if="formate(videoActionData)" width="100%" height="220" controls :src="$IP+formateScr" ></video> -->
        <video width="100%" height="220" :autostart="0" controls :src="formateScr"></video>
        <!-- <video width="100%" height="220" :autoplay="false" controls src="http://vjs.zencdn.net/v/oceans.mp4"></video> -->
      </div>
      <h3
        style="font-weight: bold;padding-left:10px;height:34px;border-bottom:1px solid #e7e7e7;line-height: 34px;margin-bottom:5px;">
        {{$t('wechat.videoInfo')}}</h3>
      <div style="padding-left:10px;"><i class="el-icon-warning-outline"></i> {{$t('wechat.playTip')}} <el-link type="primary"
          style="float: right;margin-right:20px;" @click="codeFormate(videoActionData)"><i v-if="showTime"
            class="el-icon-loading"></i> {{$t('wechat.playzhuanma')}}</el-link></div>
      <div style="padding-left:10px;width: 100%;word-wrap: break-word;word-break: break-all;"><i class="el-icon-folder"></i>{{$t('wechat.fileName')}}：{{ videoActionData.fileName }}</div>
      <!-- <div style="padding-left:10px;"><i class="el-icon-files"></i>
        文件大小：{{ (videoActionData.filesize / 1048576).toFixed(3) }}MB ({{ videoActionData.filesize }}Byte)</div> -->
      <!-- <div style="padding-left:10px;"><i class="el-icon-lock"></i> MD5：{{ videoActionData.validvalue }}</div> -->
      <div style="padding-left:10px;"><i class="el-icon-guide"></i> {{$t('wechat.imgPath')}}：{{ videoActionData.path }}</div>
    </div>
    <!-- cloud.png -->
    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff" :maskClosable="false" title="提示"
      @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>

<script>
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import { getMediaInfo, getFormateCode,getAppMediaInfo } from '@/api/media/media_api'
import { parseTime } from "@/utils/index";
import { Alert } from 'element-ui';
import { sendMarkOrderApi } from '@/api/markApi/index'
import { throttle } from 'lodash';

export default {
  name: "appVideo",
  props: ['sendData'],
  components: {
    videoPlayer,
  },
  data() {
    return {
      showTime: false,
      debounceTimer: null,
      videoList: [],
      showLoading: false,
      loadClass: 'el-icon-loading',
      loadingText: '正在加载. . .',
      formateScr: '',
      videoActionData: '',
      showVideoDetailsInfo: true,
      showRemark: false,
      remark: '',
      id: '',
      index: null,
      html: '转码',
      show: false,
      tableData: [],
      offset: 1,
      limit: 20,
      total: 0,
      src: "",
    };
  },
  created() {
    if (this.sendData.list_offset) {
      this.offset = this.sendData.list_offset;
      this.limit = this.sendData.list_limit;
    } else {
      this.offset = 1;
      this.total = 0;
    }

    this.init();
  },
  watch: {
    "$store.state.account.appVideo": function () {
      if (this.sendData.list_offset) {
        this.offset = this.sendData.list_offset;
        this.limit = this.sendData.list_limit;
      } else {
        this.offset = 1;
        this.total = 0;
      }
      this.showVideoDetailsInfo = true;
      this.videoList = [];
      this.init();
    },
  },
  mounted() {
  },
  methods: {
    handleScroll: throttle(function () {
      // 获取列表元素
      const list = this.$refs.videoList;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight + 10 >= list.scrollHeight) {
        this.showLoading = true;

        if (this.videoList.length < this.total) {
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          this.offset++;
          // 加载更多数据
          let that = this;
          that.init();
        } else {
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    }, 1000),
    codeFormate(row) {
      this.showTime = true;
      let data = {
        mediaPath: row.path,
        mediaType: 2
      }
      getFormateCode(data).then(res => {
        this.formateScr = res.data[0].direction;
        this.showTime = false;
      }).catch(err => {
        this.showTime = false;
      })
    },
    formate(item) {
      let filename = item.path;
      let extension = filename.match(/(?:\.([^.]+))?$/)[1];
      if (extension !== 'mp4' && extension !== 'MP4') {
        return true
      } else {
        return false
      }
    },
    blackVideo() {
      this.showVideoDetailsInfo = true;
      this.formateScr = '';
    },
    playVideo(item) {
      this.showVideoDetailsInfo = false;
      this.formateScr = item.path;
      this.videoActionData = item;
    },
    getRefsAff() {
      return this.$refs.videsInfoBoxMain;
    },
    handleOk() {
      let data = {
        navigation_list: sessionStorage.getItem('arr').split(','),
        model: this.sendData.model,
        isChat: 0,
        app_name: '',
        account_id: '',
        subtype: this.sendData.subtype,
        proof_num: this.sendData.proof_num,
        list_offset: this.offset,
        list_limit: this.limit,
        remark: this.remark,
        class: this.sendData.class,
        label: this.sendData.label,
        id: Number(this.id)
      }
      sendMarkOrderApi(data).then(res => {
        this.showRemark = false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.init()
      })
    },
    // 添加标记点
    markOrder(item) {
      this.id = item.id;
      this.showRemark = true;
    },
    getFileSize(fileByte) {
      var fileSizeByte = fileByte;
      var fileSizeMsg = "";
      if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
      else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
      else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
      else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
      else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      else fileSizeMsg = "文件超过1TB";
      return fileSizeMsg;
    },
    formateCodeVideo(row, index) {
      this.index = index
      this.show = true
      this.html = ``
      let data = {
        mediaPath: row.path,
        mediaType: 2
      }
      getFormateCode(data).then(res => {
        this.show = false
        // res.data.direction
        this.tableData[index].path = res.data[0].direction
        this.html = `转码`
      }).catch(err => {
        this.show = false
      })

    },
    formateDate(date) {
      return parseTime(date);
    },
    handleSizeChange(val) {
      this.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      this.offset = val
      this.init()
    },
    init() {
      let data = {
        proof_num: this.sendData.proof_num,
        // subtype: this.sendData.subtype,
        // model: this.sendData.model,
        // mediatype: 2,
        offset: this.offset,
        limit: this.limit,
      };
      getAppMediaInfo(data).then((res) => {
        this.showLoading = false;
        if (res.data.length == 0) {
          this.showLoading = true;
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return;
        }
        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
          this.videoList.push(element)
        }
        try {
          this.total = res.data[0].cnt;

        } catch (error) {
          this.total = 0;
        }
      });
    },
  },
};
</script>
<style scoped>
.loadingBox {
  text-align: center;
  width: 100%;
}

.videoDetailsHeader {
  height: 50px;
  display: flex;
}

.itemBoxVideo {
  width: 49.7%;
  height: 329px;
  cursor: pointer;
  position: relative;
  border: 1px solid #efefef;
}

.gutter-example>div {
  margin-bottom: 1px;
}

.badgeBox {
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}

.btnBiaoji {
  position: absolute;
  top: 20px;
}

.biaozhuimg {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 5px;
  right: 10px;
}

p {
  border: 1px solid rgb(235, 235, 235);
  padding-left: 10px;
}

.ant-row {
  margin: 0 !important;
}

.gutter-example {
  width: 100%;
  height: 800px;
  overflow-y: auto;
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 2px;
}

.detailsBox {
  width: 100%;
  height: 99vh;
  overflow-y: auto;
  position: relative;
}

.detailsBox>div {
  min-height: 30px;
  line-height: 30px;
  /* padding-left:10px; */
  border-bottom: 1px solid #ebebeb;
}

.playLogo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.gutter-example::-webkit-scrollbar {
  width: 8px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.gutter-example::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.gutter-example::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.hongbaotext {
  position: absolute;
  right: 50px;
  top: 40px;
  color: #fff;
}
</style>
<style scoped>
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 2px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}

.line {
  width: 8px;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.videoBox {
  position: relative;
}

.fenYeBox {
  display: flex;
  padding-left: 15%;
  padding-top: 2px;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .itemBoxVideo {
    width: 33%;
    height: 268px;
    cursor: pointer;
    position: relative;
    border: 1px solid #efefef;

  }

  .gutter-example {
    width: 100%;
    height: 93%;
    overflow-y: auto;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2px;
  }
}

/* @media screen and (min-width: 3440px) {
.gutter-example {
  width: 100%;
  height: 800px;
  overflow-y: auto;
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 2px;
  padding-bottom:100px;
}
} */</style>